<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-27 16:28:10
-->
<template>
  <div class="home">
    <!-- 头部区域 -->
    <div class="header">
      <div class="containor">
        <div class="name">行学天下</div>
        <ul class="category">
          <li
            v-for="(category, index) in categories"
            :key="index"
            @click="categoryClickHandler(index)"
          >
            {{ category.name }}
          </li>
        </ul>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <span>联系我们</span>
        </div>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swipper">
      <el-carousel height="470px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <h1>精选游学项目</h1>
      <!-- 游学项目卡片 -->
      <div
        class="projectCard"
        v-for="(item, index) in projects"
        :key="index"
        @click="cardClickHander(item.id)"
      >
        <div class="cardLeft">
          <img :src="item.figure" alt="图片丢失" width="350px" height="200px" />
        </div>
        <div class="cardRight">
          <div class="cardTitle">{{ item.name }}</div>
          <div class="cardDatetime">
            {{ item.region }}：{{ item.beginTime | fmtDate }} ——
            {{ item.endTime | fmtDate }}
          </div>
          <div class="cardDes">{{ item.introduce }}</div>
        </div>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <h1>学生风采</h1>
      <!-- 学生风采模块 -->
      <div class="studentElegent">
        <div
          class="stuEleCard"
          v-for="(item, index) in stuElegent"
          :key="index"
        >
          <div>
            <img :src="item.cover" alt="图片丢失" height="200px" />
          </div>
          <div class="cardText">
            <div class="eleCardTitle">{{ item.title }}</div>
            <div class="eleCardDatetime">{{ item.publishTime }}</div>
            <div class="eleCardUser">{{ item.baseUser.realname }}</div>
            <div class="eleCardNum">
              <svg
                t="1637916659640"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4255"
                width="14"
                height="14"
              >
                <path
                  d="M542.6688 85.333333c-74.325333 0-133.307733 58.026667-133.307733 133.393067 0 43.861333-37.922133 113.578667-80.093867 148.4288-30.754133 25.412267-98.013867 45.226667-200.055467 56.661333l-3.413333 0.4608a68.266667 68.266667 0 0 0-57.258667 67.328l-0.238933 374.442667-0.0512 0.256c-0.170667 1.194667-0.1024 2.269867 0.017067 3.822933l0.085333 3.413334a68.2496 68.2496 0 0 0 68.1984 64.853333l612.096 0.136533 0.341333 0.0512c0.836267 0.0512 1.6896 0.085333 2.542934 0.085334 25.463467 0 50.568533-7.168 72.430933-21.026134l4.693333-3.072a133.205333 133.205333 0 0 0 40.772267-45.2096l1.604267-3.072-1.6384 2.5088c4.642133-6.5024 8.021333-13.824 10.103466-21.6064l74.069334-326.894933 0.768-3.242667c0.9216-4.488533 1.365333-9.557333 1.2288-14.728533l-0.068267-1.092267-0.119467 2.474667a132.949333 132.949333 0 0 0-20.206933-81.271467l-2.6112-4.061866c-23.125333-34.577067-61.013333-56.081067-102.2976-59.204267l-2.679467-0.170667-1.024-0.136533a61.969067 61.969067 0 0 0-7.560533-0.4608l-145.442133-0.1024 1.8432-8.8576a393.728 393.728 0 0 0 7.185066-75.025067c0-28.501333-3.242667-56.951467-9.472-85.333333l-0.699733-2.696533a34.116267 34.116267 0 0 0-0.9216-2.628267l-0.477867-1.041067-0.682666-2.4576A133.4272 133.4272 0 0 0 542.6688 85.333333z m0 68.266667a65.160533 65.160533 0 0 1 62.5664 47.274667l1.553067 5.922133 0.6144 1.672533-0.955734-4.727466a323.703467 323.703467 0 0 1-10.120533 177.425066l-0.750933 2.389334a34.133333 34.133333 0 0 0 32.938666 42.973866L818.670933 426.666667l1.604267 0.238933 2.423467 0.187733a66.986667 66.986667 0 0 1 54.6304 31.573334 64.853333 64.853333 0 0 1 10.154666 35.84l-0.273066 6.877866 0.1024 2.525867-73.796267 325.700267-1.1264 1.7408-1.245867 2.269866a65.314133 65.314133 0 0 1-23.552 26.2656l-3.720533 2.2016a66.833067 66.833067 0 0 1-28.125867 8.192l-2.133333 0.0512-2.048-0.068266L136.533333 870.126933l0.256-378.4704c114.210133-12.782933 192.273067-35.7888 235.946667-71.867733 55.415467-45.806933 102.3488-130.594133 104.789333-195.822933l0.085334-5.239467c0-37.410133 28.16-65.1264 65.041066-65.1264z"
                  fill="#444444"
                  p-id="4256"
                ></path>
                <path
                  d="M290.133333 580.266667v187.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-34.133333V546.133333h34.133333a34.133333 34.133333 0 0 1 34.133333 34.133334z"
                  fill="#00B386"
                  p-id="4257"
                ></path>
              </svg>
              <span style="margin-left: 5px">{{ item.thumpUp }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      categories: [],
      carousel: [],
      projects: [],
      stuElegent: [],
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    // 查询所有轮播图
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    // 查询所有游学项目信息
    findAllProjects() {
      get("/index/project/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.projects = res.data.list;
        }
      );
    },
    // 查询所有学生风采信息
    findAllStudentElegents() {
      get("/index/article/pageQuery", { page: 1, pageSize: 100 }).then(
        (res) => {
          this.stuElegent = res.data.list;
        }
      );
    },
    // 游学项目卡片点击事件
    cardClickHander(id) {
      // 点击项目卡片，跳转至目标页面
      // 通过query属性携带参数，参数会以查询字符串的形式，拼接到url地址栏后面
      this.$router.push({ path: "/project", query: { id } });
    },
    categoryClickHandler(index) {
      console.log(index);
    },
  },
  // vue组件的生命周期钩子函数
  created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    // 调用查询所有轮播图的方法
    this.findAllCarousel();
    // 调用查询所有项目信息的方法
    this.findAllProjects();
    // 调用查询所有学生风采信息的方法
    this.findAllStudentElegents();
  },
};
</script>

<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.content {
  padding: 0 100px;
  margin-top: 50px;
}
.projectCard {
  height: 200px;
  line-height: 200px;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 0 5px 5px rgba(202, 200, 200, 0.178);
  margin-bottom: 20px;
  cursor: pointer;
}
.cardRight {
  padding-left: 1em;
  font-family: "微软雅黑";
}
.cardTitle {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #666;
  font-weight: bold;
}
.cardDatetime {
  height: 50px;
  line-height: 50px;
}
.cardDes {
  height: 35px;
  line-height: 35px;
}
.studentElegent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.stuEleCard {
  flex-basis: 24%;
  cursor: pointer;
  margin-bottom: 10px;
}
.stuEleCard:hover {
  box-shadow: 0 0 5px 5px #d4d3d386;
}
.stuEleCard img {
  width: 100%;
  border-radius: 5px;
}
.cardText {
  padding: 1em;
  font-family: "微软雅黑";
  line-height: 35px;
  background-color: #ededed8c;
  height: 200px;
}
</style>
